import { View, Text, Textarea, Input } from "@tarojs/components";
import './index.less'
import { AtButton, AtForm } from "taro-ui";
import { useEffect, useState } from "react";

export const ContentForm = (props: {visible: boolean; editData?: {title?: string, content?: string};onSubmit: (value: {title: string, content: string}) => void}) => {
  const { visible, editData, onSubmit } = props;
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  useEffect(() => {
    if (!visible) {
      setTitle('');
      setContent('');
    } else {
      setTitle(editData?.title || '');
      setContent(editData?.content || '');
    }
  }, [visible])
  
  return (
    <View className='content-form'>
    <AtForm onSubmit={() => onSubmit({title, content})}>
        <Text className='label'>标题</Text>
        <Input
          placeholder='请输入标题'
          name='title'
          className='input'
          style={{width: '100%'}}
          value={title}
          onInput={(e) => setTitle(e.detail.value)}
        />
        <Text className='label'>内容</Text>
        <Textarea
          placeholder='请输入内容'
          name='content'
          className='input'
          style={{width: '100%'}}
          value={content}
          onInput={(e) => setContent(e.detail.value)}
        />
      <AtButton type="primary" formType='submit'>提交</AtButton>
    </AtForm>
    </View>
  );
};
